<template>
	<div class="index">
		<header>
			<span>Hi! 欢迎您 , <span>{{username}}</span></span><span style="margin-left: 35px;margin-right: 20%"><a href="/index.html#/login">退出</a></span>
		</header>
		<nav>
			<ul>
				<li><img src="../../assets/img/logoa_20.png"></li>
				<li style="margin-left: 169px"><span><a href="">工资录入</a></span></li>
				<li><span>人员录入</span></li>
				<li><span>暂无</span></li>
				<li><span>暂无</span></li>
			</ul>
		</nav>
		<div class="banner" >
			
		</div>
		
		<div class="daoru">
			<p>
				<i class="dot"></i>工资/人员表修改
			</p>
			<div class="dateS">
			<span class="text1" >类型</span>
				<Select v-model="model1" style="width:100px;margin-right:30px;margin-bottom:4px" size="large">
					<Option v-for="item in type" :value="item.value" :key="item">{{ item.label }}</Option>
				</Select>
			<span class="text1" >门店</span>
				<Select v-model="mendian" style="width:100px;margin-right:30px;margin-bottom:4px" size="large">
					<Option v-for="item in type" :value="item.value" :key="item">{{ item.label }}</Option>
				</Select>
				<div style="display:inline-block;" v-show="model1">
					<span  class="text1" >月份</span>
					<el-date-picker v-model="month" type="month" placeholder="选择月" format="yyyy-MM">
					</el-date-picker>
				</div>
				<!-- <el-upload class="upload-demo inlineB" action="http://api.kx910.com/api/admin/excel/import" :on-progress="getLoading" :on-success="getExcel" :data={type:model1,token:token} > -->
					<el-button size="small" type="primary" style="margin-left:10px" @click="zairu">载入工资/人员表</el-button>

			<!-- 	</el-upload> -->

			</div>
			<p style="margin-top: 45px">
				<i class="dot"></i>在线预览
			</p>
			
		</div>
		<div style="width:50%;margin:0 auto;padding-bottom:10px">
			<p>	
				<el-button size="small" type="primary" :disabled="true">添加</el-button>
				<el-button size="small" type="primary">删除</el-button>
				
			</p>
		</div>

		<div class="yulan">
			<el-table :data="excelData" border  style="width: 100%;margin-left: 60px;" height="800"  v-loading="loading"
    				element-loading-text="拼命导入中">
				<el-table-column v-bind:prop="item[0]"  v-bind:label="item[0]"  v-for="(item,index) in a" :fixed="item[1]">
				</el-table-column>

			</el-table>
		</div>
		<div style="width: 100%;margin-top: 75px;text-align: center;"><button class="confirm1" v-on:click="confirm">确认修改</button></div>
		<el-dialog title="提示" :visible.sync="dialogVisible1" size="tiny" :show-close="false">
			<span>{{message}}</span>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="dialogVisible1 = false">确定</el-button>
			</span>
		</el-dialog> 
		<el-dialog title="提示" :visible.sync="dialogVisible2" size="tiny" :show-close="false">
			<p v-for="(item,index) in messageRenyuan"><span>{{index}}</span><span style="float:right">{{item.original.data}}</span></p>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="dialogVisible2 = false">确定</el-button>
			</span>
		</el-dialog> 

	</div>
</template>
<script>
	export default {
		data(){
			return{
				model1:1,
				type: [
				{
					value: 0,
					label: '人员'
				},
				{
					value: 1,
					label: '工资'
				}],
				token:sessionStorage.token
			}
		},
		methods:{
			zairu:function  () {
				// body...
				var _this = this
				if (this.model1 == 1) {
					this.$http.get('http://api.kx910.com/api/admin/wechat/getSalary',{
						params:{	
							token:_this.token
					}
					})
					.then(function(res){
						console.log(res)
					})
				}
			}
		}
	}
</script>
<style scoped>
body{
		font-family: "微软雅黑"
	}
	header{
		width: 100%;
		height: 35px;
		background-color: rgb(238,238,238);
		text-align: right;
		line-height: 35px;
		color: #777777
	}
	span{
		font-family: "微软雅黑"
	}
	a{
		text-decoration: none;
		color: #777777
	}
	nav{
		width: 62%;
		min-width: 1200px;
		font-size: 18px;
		margin: 0 auto;
		margin-top: 28px;
		margin-bottom: 25px;
	}
	ul li {
		list-style: none;
	}
	nav ul li {
		display: inline-block;
		margin-right: 68px
	}
	.banner{
		background: url(../../../static/img/home-banner.png) no-repeat;
		height: 550px;
		width: 100%;background-size: contain;
	}
	.icon{
		margin: 0 auto;
		width:481px;height: 74px;
		background: url(../../assets/img/title.png);
		margin-top: 90px
	}
	.daoru{
		width: 64%;
		margin: 0 auto;
		margin-bottom: 40px;
	}
	.dot{
		display: inline-block;
		width: 20px;
		border-radius:10px;
		height: 20px;
		background-color: rgb(235,97,0);
		margin-right: 20px;
	}
	.daoru p{
		font-size: 24px;
		color: #777777;
		margin-left: 70px;
		margin-top: 30px
	}
	.text1{
		font-size: 24px;
		color: #777777;
		margin-right: 35px
		
	}
	.dateS{
		margin-top: 40px;
		margin-left: 120px;
		position: relative;
	}
	.inlineB{
		display: inline-block;
		margin-left: 30px;
		position: absolute;
		margin-top: 5px
	}
	.yulan{
		width: 64%;
		margin: 0 auto;

	}
	.confirm1{
		width: 180px;
		height: 40px;
		border-radius: 20px;
		border: none;
		cursor: pointer;
		background-color:rgb(0,104,183);
		color: white;
		font-size: 20px
	}
</style>